<template>
  <div style="padding: 10px">
    <header>
      <el-form
        ref="elForm"
        :model="searchData"
        size="medium"
        label-width="100px"
      >
        <el-row style="padding-top: 5px">
          <el-input
            size="mini"
            v-model="searchData.productName"
            style="width: 180px; margin: 0 10px"
            placeholder="请输入产品名称"
            clearable
          ></el-input>
          <el-button
            type="success"
            size="mini"
            v-hasPermi="['business:product:list']"
            @click="getProductList(1)"
            >搜索</el-button
          >
          <el-button
            type="primary"
            size="mini"
            v-hasPermi="['business:product:add']"
            @click="addOrEditProduct()"
            >新增产品</el-button
          >
          <el-button
            type="danger"
            size="mini"
            v-hasPermi="['business:product:export']"
            @click="exportProduct()"
            >导出表格</el-button
          >
        </el-row>
      </el-form>
    </header>
    <el-row :gutter="10">
      <el-col :span="10">
        <el-table
          :data="tableData"
          border
          v-loading="tableLoading"
          ref="monthlyPlanTable"
          row-key="pkProProduct"
          highlight-current-row
          @current-change="handleClickCurrentChange"
        >
          <el-table-column width="50" align="center" type="index" label="序号">
          </el-table-column>
          <el-table-column
            prop="productName"
            label="产品名称"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="unit" label="单位" align="center">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                slot="reference"
                @click="addOrEditProduct(scope.row)"
                type="text"
                size="small"
                >编辑</el-button
              >

              <el-button
                type="text"
                size="small"
                v-hasPermi="['business:product:remove']"
                @click="removeCraft(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 10px"
          align="center"
          :hide-on-single-page="false"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="10"
          :current-page="searchData.pageNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-col>
      <el-col :span="14">
        <el-table
          :data="productCraftList"
          border
          v-loading="tableLoading"
          show-summary
          :span-method="mergeTable"
        >
          <el-table-column width="50" align="center" type="index" label="顺序">
          </el-table-column>
          <el-table-column
            prop="craftName"
            label="工序名称"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="craftPriceNum"
            label="计件单价（元）"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="craftPriceTime"
            label="计时单价（元/小时）"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="craftRemark" label="备注" align="center">
          </el-table-column>
          <el-table-column
            prop="file"
            label="照片"
            align="center"
            :aria-rowspan="productCraftList.length"
          >
            <template slot-scope="scope">
              <el-image
                v-if="file"
                style="width: 100px; height: 100px"
                :src="file"
              ></el-image>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getProductListApi, deleteProductApi } from "@/api/product/product.js";
export default {
  components: {},
  watch: {},
  computed: {},
  data() {
    return {
      tableLoading: true,
      tableData: [],
      productCraftList: [],
      productInfo: {},
      total: 0,
      searchData: {
        productName: "",
        pageNum: 1,
        pageSize: 10,
      },
      file: "",
      editCraftDetail: {},
      workmanship: [],
      currentRow: null,
    };
  },
  created() {
    // this.getCraftInfo(); //工艺
  },
  async mounted() {
    await this.getProductList();
    // this.$nextTick(() => {
    //   this.$refs.monthlyPlanTable.setCurrentRow(this.tableData[0]);
    // });
  },
  methods: {
    // 查询产品列表分页
    async getProductList(page) {
      try {
        this.searchData.pageNum = page == null ? this.searchData.pageNum : page;
        const res = await getProductListApi(this.searchData);
        if (res.data.list != null) {
          this.tableData = res.data.list;
          this.total = res.data.total;
          if (res.data.list[0].productCraftList) {
            this.productInfo = res.data.list[0];
            this.file = res.data.list[0].file;
            this.productCraftList = res.data.list[0].productCraftList;
          }
          this.$nextTick(() => {
            this.$refs.monthlyPlanTable.setCurrentRow(this.tableData[0]);
          });
        }
      } catch (error) {
      } finally {
        this.tableLoading = false;
      }
    },
    async getCraftInfo() {
      const res = await queryFlowInfos(this.searchData);
      this.workmanship = res.data;
    },
    //分页修改每页显示条数
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.getProductList();
    },
    //分页跳转页面
    handleCurrentChange(val) {
      this.searchData.pageNum = val;
      this.getProductList();
    },
    // 点击高亮
    handleClickCurrentChange(val) {
      console.log("点击高亮", val);
      this.file = val.file;
      this.currentRow = val;
      this.productInfo = val;
      this.productCraftList = val.productCraftList;
      this.selectedIndex = val.$index;
    },
    // 合并照片列单元格
    mergeTable({ row, column, rowIndex, columnIndex }) {
      // console.log(columnIndex);
      if (columnIndex === 5) {
        return {
          rowspan: this.productCraftList.length,
          colspan: 1,
        };
      }
    },
    // 导出表格
    exportProduct() {
      this.download(
        "/business/product/export",
        {
          ...this.searchData,
        },
        `产品${new Date().getTime()}.xlsx`
      );
    },
    // 删除产品
    async removeCraft(row) {
      const res = await deleteProductApi(row.pkProProduct);
      this.$message.success("移除成功");
      this.getProductList(1);
    },
    // 添加编辑跳转
    addOrEditProduct(row) {
      this.$router.push({
        path: "addProductSet",
        query: {
          type: row ? "edit" : "add",
          productInfo: row ? JSON.stringify(row) : "",
        },
      });
    },
  },
};
</script>

<style scoped>
>>> .el-table__body tr.current-row > td.el-table__cell {
  background-color: #a6bfee !important;
}
</style>
